<template>
<scroll-view class="fwP">
	<uni-card class="fwproject">
		<view class="fwprojecttext">服务项目</view>
		<!-- <view class="fwprojectbtn" @click="fwprojectbtn" v-model="bookingInfo.orderType">请选择服务项目</view>
		<image src="../../static/r.png" class="fwpicture" @click="fwprojectbtn" v-model="bookingInfo.orderType"></image> -->
		<view class="picker-container">
		    <picker mode="selector" :range="serviceTasks" @change="handlePickerChange" class="x1">
		      <view class="picker-label">{{ selectedTask }}</view>
		    </picker>
		  </view>
	</uni-card>
	
	<uni-card class="fwPhone">
		<view class="fwPhonetext">服务电话</view>
		<input class="fwPhonenumber" placeholder="请输入服务电话" v-model="bookingInfo.phone">
	</uni-card>
	
	<uni-card class="fwinformation1">
		<image src="../../static/location.png" class="fwinformationpicture1"></image>
		<view class="fwinformationtext1">选择服务地区</view>
		<image src="../../static/r.png" class="fwinformationpicture2" @click="fwinformationpicture2"></image>
		<view class="addressInfo" style="margin-left: 40rpx;">四川省成都市武侯区孵化园</view>
		<view class="fwinformationtext2">请输入详细地址</view>
		<input class="fwinformationaddress" placeholder="输入地址"  v-model="bookingInfo.requestLocation">
		<image src="../../static/time.png" class="fwinformationpicture3"></image>
		<view class="fwinformationtext3">上门时间</view>
		<view class="fwinformationtime">
					<uni-datetime-picker type="datetime" v-model="bookingInfo.serviceHours" @change="changeLog" />
				</view>
		<view class="fwinformationtext4">将为你匹配附近的师傅</view>
	</uni-card>
	
	<uni-card class="card4">
		<input class="fwinformation2" placeholder="服务备注信息(非必填)" v-model="bookingInfo.dispatchOrders">
	</uni-card>
	
		<button @click="showLoginModal" class="fwbtn">立即预约</button>

		<uni-popup ref="showSmsPopup" type="center">
			<scroll-view class="popup-content1">
				<view class="v21">请输入验证码</view>
				<view class="v22">已发送4位验证码至</view>
				<input placeholder="请输入验证码" class="v23"/>
				<button @click="tijiao" class="btn11">提交</button>
				<button @click="quxiao" class="btn22">取消</button>
			</scroll-view>
		</uni-popup>
		
</scroll-view>

</template>

<script setup>
import { ref, onMounted } from 'vue';
import {
	saveInfo,
}from "@/api/booking.js"
const popup = ref(null);
const serviceTasks = ['墙壁补修', '家电维修', '管道疏通'];
const selectedTask = ref('请选择服务项目');
const handlePickerChange=(e)=> {
 const index = e.detail.value;
   if (index >= 0 && index < serviceTasks.length) {
     selectedTask.value = serviceTasks[index];
   }
  
}
const tijiao= async  ()=>{
	
	 uni.navigateTo({
					           url: '/pages/booking/success'
					         });
	// const info=JSON.stringify(bookingInfo.value);
		
	// let res = await saveInfo(info);

	console.log("保存成功！")
	showSmsPopup.value.close();
}
const fwinformationpicture2 =()=>{
	uni.navigateTo({
						           url: '/pages/booking/map'
						         });
}
const quxiao=()=>{
	console.log("取消发送！");
		showSmsPopup.value.close();
}
const showSmsPopup = ref(null);
const showLoginModal = () => {
	showSmsPopup.value.open();

}

//服务项目选择
const  fwprojectbtn =()=>{
	alert("sss");
}


const bookingInfo=ref({
	orderType:'',
	phone:'',
	requestLocation:'',
	serviceHours:'',
	dispatchOrders:''
})




</script>

<style lang="scss">
	.x1{
	
	         margin-top: -44rpx;
			margin-left: 370rpx;
			
		color: black;
		font-size: 30rpx;
	}
	
	.v21{
		margin-top: 20rpx;
		margin-left: 150rpx;
		font-weight: bold;
	}
	.v22{
		margin-left: 40rpx;
		margin-top: 10rpx;
	}
	.v23{
		margin-top: 10rpx;
		margin-left: 150rpx
	}
	.btn11{
		 margin-top: 20rpx;
		 border-radius: 10px;
		 width: 200rpx;
		 color: #7a76fa;
	}
	.btn22{
		 margin-top: 20rpx;
		 border-radius: 10px;
		 width: 200rpx;
		 		 color: #7a76fa;
	}
	
	.v1{
		margin-top: -47rpx;
		margin-left: 50rpx;	
	}
	.v2{
		margin-top: 40rpx;
		font-size: 40rpx;
	}
	.v3{
		margin-top: 30rpx;
		color: darkgrey;
	}
	.icon1{
		background-color: papayawhip;
		height:40rpx;
		width: 40rpx;
	}
	

	.popup-content1{
	background-color: white;
	height: 400rpx;
	width: 500rpx;
	 border-radius: 10px; /* 圆角 */
	}
	
	
	.fwproject{
		white-space: nowrap;
	}
	.fwprojecttext{
		font-weight: bold;
		font-size: 30rpx;
		display: inline-block;
		color: black;
	}
	.fwprojectbtn{
		font-weight: bold;
		font-size: 30rpx;
		display: inline-block;
		margin-left: 250rpx;  
		color: #7a76fa
	}
	.fwpicture{
		display: inline-block;
		height:30rpx;
		width: 30rpx;
		margin-left: 10rpx;
		margin-bottom: -6rpx;
	}
	.fwPhone{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.fwPhonetext{
		color: black;
		font-size: 30rpx;
		font-weight: bold;
		
	}
	.fwPhonenumber{
		color: black;
		font-size: 30rpx;
		font-weight: bold;
		flex-grow: 1;
		margin-left: 370rpx;
		margin-top: -44rpx;
	}
	.fwinformation1{
		white-space: nowrap;
	}
	.fwinformationtext1{
		color: black;
		display: inline-block;
		font-weight: bold;
		margin-left: 10rpx;
	}
	.fwinformationpicture1{
		display: inline-block;
		height:30rpx;
		width: 30rpx;
		margin-bottom: -3rpx;
	}
	.fwinformationpicture2{
		display: inline-block;
		height:30rpx;
		width: 30rpx;
		margin-left: 380rpx;
		margin-bottom: -6rpx;
	}
	.fwinformationtext2{
		color: black;
		font-weight: bold;
		margin-left: 40rpx;
		margin-top: 10rpx;
	}
	.fwinformationaddress{
		margin-top: 10rpx;
		margin-left: 40rpx;
		font-weight: bold;
		color: black;
	}
	.fwinformationpicture3{
		display: inline-block;
		height:30rpx;
		width: 30rpx;
		margin-bottom: -3rpx;
	}
	.fwinformationtext3{
		display: inline-block;
		color: black;
		font-weight: bold;
		font-size: 30rpx;
		margin-left: 10rpx;
	}
	.fwinformationtext4{
		font-size: 30rpx;
		color: orange;
		font-weight: bold;
		margin-left: 42rpx;
	}
	.card4{
		height: 300rpx;
	}
	.fwinformation2{
		font-size: 30rpx;
		font-weight: bold;
	}
	.fwbtn{
		border: none !important;
		width: 600rpx;
		border-radius: 20px;
		background-color:#7a76fa;
		color: white;
	}
</style>
